<style lang="scss" scoped>
::v-deep .el-radio {
  display: block;
  margin: 10px 0;
}
.remark {
  color: rgb(37, 137, 255);
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
  margin: 17px 0;
  font-size: 16px;
}
.el-radio ::v-deep .el-radio__label {
  font-size: 16px;
  line-height: 2;
}
.el-radio ::v-deep .el-radio__inner {
  width: 15px;
  height: 15px;
  // margin-bottom: 5px;
}
</style>

<template>
  <!-- <el-row :inline="true"> -->
  <!-- <el-form-item label="分货比例模式" prop="orderDistributionRatio">
        
        <el-input
          v-model="form.orderDistributionRatio"
          placeholder="请输入分货比例模式"
        />
按销售数量 (ALLOCATION_BY_SALES_QUANTITY)
按销售金额 (ALLOCATION_BY_SALES_AMOUNT)
按售罄率 (ALLOCATION_BY_SOLD_OUT_RATE)
按动销率 (ALLOCATION_BY_SALES_VELOCITY)
自定义优先级 (CUSTOM_PRIORITY)
      </el-form-item> -->
  <!-- <el-form-item label="分货比例模式" prop="orderDistributionRatio"> -->

  <el-form :model="form" ref="form" size="large">
    <el-row style="margin: 15px 0">
      <el-col :span="8">
        <el-form-item label="时间维度" prop="recentDaysCount">
          <el-radio-group v-model="form.recentDaysCount" size="small">
            <el-radio-button
              v-for="(item, index) in typeArr"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio-button
            >
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="8"
        ><el-form-item label="自定义" prop="recentDaysCount">
          <el-date-picker
            @change="changeDate"
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker> </el-form-item
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-radio-group
          v-model="form.priorityAllocationMode"
          size="medium"
          type="vertical"
        >
          <el-radio :label="'ALLOCATION_BY_SALES_QUANTITY'"
            >按销售数量</el-radio
          >
          <el-radio :label="'ALLOCATION_BY_SALES_AMOUNT'">按销售金额</el-radio>
          <el-radio :label="'ALLOCATION_BY_SOLD_OUT_RATE'">按售罄率</el-radio>
          <el-radio :label="'ALLOCATION_BY_SALES_VELOCITY'">按动销率</el-radio>
          <el-radio :label="'CUSTOM_PRIORITY'"
            >自定义优先级<el-button
              style="margin-left: 5px"
              type="primary"
              plain
              size="mini"
              @click="opentagkey"
              >设置优先级</el-button
            ></el-radio
          >
        </el-radio-group></el-col
      >
      <el-col :span="12">
        <div class="remark">说明：按虚拟仓对应店铺货品总销售数量降序</div>
        <div class="remark">说明：按虚拟仓对应店铺货品总销售额降序</div>
        <div class="remark">说明：按虚拟仓对应店铺货品的售罄率降序</div>
        <div class="remark">说明：按虚拟仓对应店铺货品的动销率降序</div>
        <div class="remark">说明：可自定义根据设置好的优先级进行该次分货</div>
      </el-col>
    </el-row>

    <!-- </el-form-item> -->
    <!-- <el-form-item label="方案编码" prop="strategyCode">
        <el-input v-model="form.strategyCode" placeholder="请输入方案编码" />
      </el-form-item>
      <el-form-item label="方案名称" prop="strategyName">
        <el-input v-model="form.strategyName" placeholder="请输入方案名称" />
      </el-form-item>
      <el-form-item label="优先级" prop="priorityLevel">
        <el-input v-model="form.priorityLevel" placeholder="请输入优先级" />
      </el-form-item>
      <el-form-item label="配货来源" prop="allocationSource">
        <el-input
          v-model="form.allocationSource"
          placeholder="请输入配货来源"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="form.brand" placeholder="请输入品牌" />
      </el-form-item>
      <el-form-item label="生效开始日期" prop="effectiveStartDate">
        <el-date-picker
          clearable
          v-model="form.effectiveStartDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="生效结束日期" prop="effectiveEndDate">
        <el-date-picker
          clearable
          v-model="form.effectiveEndDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效结束日期"
        >
        </el-date-picker>
      </el-form-item> -->
    <!-- </el-row> -->
    <el-form-item style="width: 100%; text-align: center">
      <!-- <el-button @click="submitnote('noticForm')" type="primary"
        >笔记合作</el-button
      > -->
      <el-button style="margin-top: 12px" @click="prev">上一步</el-button>
      <el-button style="margin-top: 12px" @click="next">下一步</el-button>
      <el-button style="margin-top: 12px" @click="submitForm"
        >保存草稿</el-button
      >
      <!-- <el-button @click="resetForm" style="margin-left: 10px"
        >一键清空</el-button
      > -->
    </el-form-item>

    <el-dialog
      :visible.sync="tagkeyVisible"
      width="500px"
      append-to-body
      v-if="tagkeyVisible"
    >
      <div class="el-dialog-div">
        <el-form :model="formData" :inline="true">
          <el-form-item style="width: 200px" label="店铺名称"></el-form-item>
          <el-form-item style="width: 100px" label="优先级"></el-form-item>
          <el-form-item
            v-for="(item, index) in formData.libraryIdList"
            :key="index"
          >
            <!-- <el-input
              style="width: 150px"
              v-model="item.storeName"
              placeholder="店铺名称"
            ></el-input> -->
            <el-select
              v-model="item.storeName"
              clearable
              filterable
              placeholder="店铺"
              style="width: 200px"
            >
              <el-option
                v-for="item in ShopInfoList"
                :key="item.comment"
                :label="`${item.comment}`"
                :value="item.comment"
              >
              </el-option>
            </el-select>
            <!-- <el-input
              style="width: 150px"
              v-model="item.field_name"
              placeholder="请输入字段值"
            ></el-input> -->
            <el-input
              style="width: 100px"
              v-model="item.storePriority"
              placeholder="优先级"
            ></el-input>

            <span
              v-if="formData.libraryIdList.length > 0"
              style="margin-left: 5px"
            >
              <el-button type="primary" size="mini" @click="addLibraryIdList"
                >新增</el-button
              >
              <el-button type="danger" size="mini" @click="delRow(item, index)"
                >删除</el-button
              >
            </span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitformData">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-form>
</template>
<script>
import {
  listStrategy,
  getStrategy,
  delStrategy,
  addStrategy,
  updateStrategy,
} from "@/api/productAllocation/strategy";
import { JstShopInfo } from "@/api/conf/BiStoreWarehouseBinding";
import {
  listShop,
  getShop,
  delShop,
  addShop,
  updateShop,
  updateByStrategyCode,
} from "@/api/productAllocation/shop";
export default {
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tagkeyVisible: false,
      formData: {
        libraryIdList: [],
      },

      ShopInfoList: [],
      value1: [],
      typeArr: [
        { value: "7", label: "近7天" },
        { value: "15", label: "近15天" },
        { value: "30", label: "近1个月" },
        { value: "60", label: "近2个月" },
        { value: "90", label: "近3个月" },
      ],
      // 表单参数
      form: {},
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
        if (newnew) {
          this.form = newnew;
          if (!this.form.recentDaysCount) {
            this.form.recentDaysCount = "30";
          }
          // this.form.id=newnew
          // this.value1 = [
          //   this.form.startAllocationDate,
          //   this.form.endAllocationDate,
          // ];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    JstShopInfo({ pageNum: 1, pageSize: 100 }).then((response) => {
      this.ShopInfoList = response.rows.map((item) => ({
        columnName: item.shopId,
        comment: item.shopName,
      }));
    });
  },
  methods: {
    submitformData() {
      if (!this.formData.libraryIdList[0].storeName) {
        this.$modal.msgError("至少输入一个店铺");
        return;
      }
      if (!this.formData.libraryIdList[0].storePriority) {
        this.$modal.msgError("请设置优先级");
        return;
      }
      let obj = {
        strategyCode: this.row.strategyCode,
        businessType: "priority",
        allocationPurchaseConfShopList: this.formData.libraryIdList,
      };
      updateByStrategyCode(obj).then((response) => {
        if (response.code == 200) {
          this.$modal.msgSuccess("设置成功");
          this.tagkeyVisible = false;
        } else {
          this.$modal.msgError("设置失败");
          this.tagkeyVisible = false;
        }
      });
    },
    opentagkey() {
      listShop({
        strategyCode: this.row.strategyCode,
        businessType: "priority",
      }).then((response) => {
        let list = [{ storeName: "", storePriority: "" }];
        if (response.rows.length > 0) {
          list = [];
          response.rows.forEach((item) => {
            list.push({
              storeName: item.storeName,
              storePriority: item.storePriority,
            });
          });
        }
        // this.cols
        this.formData.libraryIdList = list;
      });

      this.tagkeyVisible = true;
    },
    // 取消按钮
    cancel() {
      this.tagkeyVisible = false;
    },
    //添加库存名称
    addLibraryIdList() {
      this.formData.libraryIdList.push({ storeName: "", storePriority: "" });
    },
    //库存名称删除
    delRow(item, index) {
      if (this.formData.libraryIdList.length > 0) {
        this.formData.libraryIdList.splice(index, 1);
      } else {
        this.$message.warning("至少选择一项");
      }
    },
    changeDate() {
      this.form.startAllocationDate = this.value1[0];
      this.form.endAllocationDate = this.value1[1];
    },
    prev() {
      this.updateForm();
      this.$emit("prev");
    },
    next() {
      this.updateForm();
      this.$emit("next");
    },
    /** 提交按钮 */
    updateForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              // this.$modal.msgSuccess("修改成功");
              //   this.open = false;
              //   this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              //   this.open = false;
              //   this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
            });
          }
        }
      });
    },
  },
};
</script>
